<div  nz-col [nzSpan]="24" style="margin:16px 0;">
 <div nz-row [nzType]="'flex'" [nzJustify]="'space-between'">
     

 <div  nz-col [nzSpan]="7" class="marginText" style="margin-left:0;">
     <h1>        <img class="expanded"  src="./assets/img/person.png"   style="max-height:40px;"/>
{{user.name}}，{{greetings}}</h1>
      <div class="divUser">
           <div><i class="anticon anticon-team"></i>&nbsp;&nbsp;{{user.role}}</div>
     <div><i class="anticon anticon-environment-o"></i>&nbsp;&nbsp;上海市浦东新区</div>
      </div>
      <div class="divTag">
        <h3 style="margin:10px;">标签</h3>
         <nz-tag *ngFor="let tag of usertags">{{tag}}</nz-tag>
      </div>
  
     
  </div>
 
 <div  nz-col [nzSpan]="8" class="marginText">
       <div class="pText" nz-col [nzSpan]="24" (click)="isShowClick(1)">
          <div class="pImg"  nz-col [nzSpan]="5">
        <img  src="./assets/img/bing.png" /> 
      </div>
       <div  nz-col [nzSpan]="18" [nzOffset]="'1'">
          <h1>{{deliveryCount}}</h1>
          <p>投放申请的统计</p>
       </div>
      
     </div>

      <div class="pText"   nz-col [nzSpan]="24" (click)="isShowClick(2)">
          <div class="pImg"  nz-col [nzSpan]="5">
        <img  src="./assets/img/zhu.png" /> 
      </div>
       <div  nz-col [nzSpan]="18" [nzOffset]="'1'" >
          <h1>{{workitemCount}}</h1>
          <p>工作项的统计</p>
       </div>
      
     </div>

      <div class="pText"   nz-col [nzSpan]="24" (click)="isShowClick(3)">
          <div class="pImg"  nz-col [nzSpan]="5">
        <img  src="./assets/img/zhu.png" /> 
      </div>
       <div  nz-col [nzSpan]="18" [nzOffset]="'1'" >
          <h1>{{profilesCount}}</h1>
          <p>运行环境的统计</p>
       </div>
      
     </div>
  
  </div>
   <div  nz-col [nzSpan]="8" class="marginText"  *ngIf="isShow === 2">
     <p>工作项</p>
    <v-chart [forceFit]="forceFit" [height]="height"  [padding]="padding" [data]="data">
      <v-tooltip></v-tooltip>
      <v-axis></v-axis>
      <v-legend></v-legend>
      <v-bar position="开发状态*工作项数量" color="workType" [adjust]="adjust"></v-bar>
    </v-chart>
  </div>
 
  <!--</nz-card>-->
    
   <div  nz-col [nzSpan]="8" class="marginText" *ngIf="isShow === 1">
     <p>投放申请</p>
       <v-chart [forceFit]="toufangforceFit"   [padding]="padding" [height]="toufangheight" [data]="toufangdata" [scale]="toufangscale">
      <v-tooltip  [itemTpl]="itemTpl" [showTitle]="false"></v-tooltip>
      <v-axis></v-axis>
      <v-coord type="theta"></v-coord>
      <v-pie
        position="percent"
        color="item"
        [style]="pieStyle"
        [label]="labelConfig"
        [tooltip]="tooltip"
      ></v-pie>
      <v-legend dataKey="item"></v-legend>
    </v-chart>
  </div>

 <div  nz-col [nzSpan]="8"  class="marginText" *ngIf="isShow === 3">
     <p>运行环境</p>
   
    <v-chart [forceFit]="forceFit" [height]="height"  [padding]="padding" [data]="dataProfiles" [scale]="scaleProfiles">
      <v-tooltip></v-tooltip>
      <v-axis></v-axis>
      <v-bar position="profilesName*count"></v-bar>
    </v-chart>

  </div>
  
     
     <!--</div>-->
      
       </div>
</div>
<div nz-col [nzSpan]="24">
        <nz-card nz-col [nzSpan]="24" [nzBordered]="false"  >
      <nz-tabset [nzTabBarExtraTemplate]="tabBarExtraContent" (nzSelectChange)="SelectChange($event)">
      <nz-tab *ngFor="let tab of tabs">
        <ng-template #nzTabHeading>
         <!--<nz-tooltip  [nzTitle]="'标有“X月重点标签的工作项为月度重点”'" [nzPlacement]="'top'">
          {{tab.title}}
      </nz-tooltip>-->
      <span [nz-tooltip]="tab.index === 1?'标有“X月重点标签的工作项为月度重点！”':''" href="#">   {{tab.title}}</span>
    
        </ng-template>
       <div *ngIf="tab.index === 1">
         <!--<h3 style="text-align:center">6月重点追踪</h3>-->
          <app-list #child [initDate]="isdata" 
                     [loading]="listloading"
                       [showAdd]="showAdd" 
                       [isPagination]="isPagination"  
                       [buttons] ='buttons' 
                       (addCreat)="addHandler($event)" 
                       (buttonData)="buttonDataHandler($event)" 
                       (pageNumber)="monitorHandler($event)"
                        (deleatData)="deleatData($event)" 
                        (isActive)="isActive($event)" 
                        (buttonEvent)="buttonEvent($event)" 
                        [headerDate]="headerDate"
                        [isShowTotalhead]="isShowTotalhead" 
                        [total]="total" 
                        [pageTotal] = 'pageTotal'  
                        [pageIndex]='pageIndex'
                        [isCaocuo]="isCaocuo">
     </app-list>
       </div>
         <div *ngIf="tab.index === 2">
           此功能暂未开放(opening soon)
         </div>
   
      </nz-tab>
      <ng-template #tabBarExtraContent>
        <div *ngIf="isButton" >

   
           <div  style="float:left"  class="divText"><span *ngIf="isSHow" (click)="reset()"  [ngClass]="'spanText'">重置</span></div>
           <div  style=" position: absolute;right: 48%"  ><span *ngIf="!isSHow"  [ngClass]="'spanText'">更多筛选条件：</span></div>
          
          <div nz-col [nzSpan]="isSHow?'22':'24'" >
             <div nz-col [nzSpan]="24" >
           
           <div  *ngFor="let i of workTypeWord" nz-col [nzSpan]="i.if ?'4':'3'" (click)="getList(i)" class="divText"><span [ngClass]="i.selector?'spanTextactive':'spanText'">{{i.label}}</span></div>
          <!--<div  nz-col [nzSpan]="3" class="divText" (click)="workType('D')"><span class="isCss.P?'spanTextactive':'spanText'">需求</span></div>-->
            <!--<div  nz-col [nzSpan]="3" class="divText" (click)="workType('E')"><span class="isCss.P?'spanTextactive':'spanText'">生产事件</span></div>-->
             <nz-rangepicker  nz-col [nzSpan]="11" style="margin-right: 10px;" [(ngModel)]="dateRange" (ngModelChange)="getList()"  [nzFormat]="'YYYY/MM/DD'"></nz-rangepicker>
         <div nz-col [nzSpan]="2" >
                 <button  nz-button [nzType]="'dashed'" (click)="getModal()" [nzShape]="'circle'">
              <i class="anticon anticon-search"></i>
            </button>
         </div>
   </div>
          </div>
      
                </div> 
      </ng-template>
    </nz-tabset>
      </nz-card>
      
</div>

<nz-modal [nzVisible]="searchVisible" [nzMaskClosable]="false" [nzConfirmLoading]="ismodaloading" [nzWidth]="600" [nzTitle]="'根据标签过滤'"   [nzContent]="modals"
          (nzOnCancel)="searchVisible=false"  (nzOnOk)="getList()" nzZIndex=800>
    <ng-template #modals>
  <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                      
                        <div nz-form-control class="flex-1">                        
                         <nz-select
                        style="width: 100%;"
                        nzShowSearch = 'true'
                        [nzPlaceHolder]="'可搜索标签关键字'"
                        (nzSearchChange)="checkTabs($event)"
                        [(ngModel)]="itemLable"
                        (ngModelChange)="additemLable($event)"
                        nzKeepUnListOptions
                        [nzMode]="'multiple'"
                        [nzNotFoundContent]="'无法找到'">
                        <nz-option
                            *ngFor="let option of selecttags"
                            [nzLabel]="option"
                            [nzValue]="option">
                        </nz-option>
                        </nz-select>
                        </div>
                    </div>
                </div>
     <div style="padding: 10px;">
        <nz-tag  style="margin:0 10px 10px 0;" [nzColor]="i.istrue?'#108ee9':''" (click)="tagClick(i)" *ngFor="let i of tags" >{{i.name}}</nz-tag>
     </div>

    </ng-template>
</nz-modal>
